<template>
<div>
 <div class="banner" @click="handleBannerClick">
    <img class="banner-img" src="//img1.qunarzz.com/sight/p0/1602/68/68aa05adb5315f9990.water.jpg_600x330_0dcecae1.jpg">
	<div class="banner-info">
		<div class="info-title">北京海洋馆(AAAA景区)</div>
		<div class="icon"><span class="iconfont ">&#xe6f0;</span>{{imgs.length}}</div>
	</div>
 </div>
 <common-gallary :imgs = "imgs" v-show="ShowGallary" @close="handleGallaryClose"></common-gallary>
</div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
  name: 'DetailBanner',
  data () {
  	return {
  		ShowGallary:false,
  		imgs:[
			'http://img1.qunarzz.com/sight/p0/1602/68/68aa05adb5315f9990.water.jpg_r_800x800_1b81858e.jpg',
			'http://img1.qunarzz.com/sight/p0/1602/68/68aa05adb5315f9990.water.jpg_r_800x800_1b81858e.jpg'
  		]
  	}
  },
  components:{
  	CommonGallary
  },
  methods:{
  	handleBannerClick(){
  		this.ShowGallary = true
  	},
  	handleGallaryClose(){
  		this.ShowGallary = false
  	}
  }
}

</script>

<style lang="stylus"  scoped >
	.banner
		overflow:hidden
		height:0
		padding-bottom:54%
		position:relative
		
		.banner-img
			width:100%
			
		.banner-info
			position:absolute
			
			left:0
			right:0
			bottom:0
			top:3.5rem
			color:#fff
			font-size:.35rem
			display:flex
			background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
			
			.info-title
				flex:1
				padding:0 0.3rem
			.icon
				margin-right:.4rem
				height:.4rem
				line-height:.45rem
				background:rgba(0,0,0,.65)
				padding:0 0.3rem
				border-radius:0.15rem
				font-size:.23rem
				span
					font-size:0.14rem
					line-height:.45rem
					margin-right:0.1rem

</style>
